<template>
	<view class="container">
		<!-- 约餐弹窗 -->
		<setAutoMeal ref="pop1" @confirm="sureAuto"></setAutoMeal>
		<!-- 定制弹窗-规格选择 -->
		<speciModal ref="pop2" :data="specItem" @submit="doSubmit"></speciModal>
		<!-- <uni-popup ref="pop1" type="bottom" zindex>
			<view class="comBotBx padding-top">
				<view class="mtitle text-xll padding-left-lg">
					请设置自动约餐
				</view>
				<scroll-view scroll-x class="bg-white nav padding-lr margin-top-sm">
					<view class="flex text-center ">
						<view v-for="(item,index) in 2" :key="index" class="cu-item flex-sub text-lg point"
							:class="index==tabClass?'text-ngreen cur':''" @tap="tabClass=index" :data-id="index">
							{{index==0?'中餐':'晚餐'}}
						</view>
					</view>
				</scroll-view>
				<view class="text-lg padding-left-lg margin-top">
					剩余配送次数
				</view>
				<view class="padding-left-lg margin-top-sm">
					<view class='zm_slc radius padding-left-lg padding-right text-c9'>
						<view class="flex-sub text-lg">
							21天
						</view>
						<text class="cuIcon-roundcheckfill text-xll" style="color:#D0CFCF"></text>
					</view>
				</view>
				<view class="text-lg padding-left-lg padding-top">
					配送时间（每周）
				</view>
				<view class="flex align-center text-white padding-left-xs">
					<view v-for="(item,index) in state.mealtime1" :key="index" class="d_ib zm_itm"
						:class="{kx:!item.select}" @click="item.select=!item.select">
						{{item.name}}
					</view>
				</view>
				<view class="text-lg padding-left-lg padding-top-lg">
					配送时间段
				</view>
				<view class="padding-left-lg margin-top-sm flex align-center flex-wrap">
					<view v-for="(item,index) in state.mealtime2" :key="index" @click="tapMealTime(item)"
						class='zm_slc radius padding-lr text-c9'>
						<view class="flex-sub text-lg">
							{{item.name}}
						</view>
						<text class=" text-xll" :class="item.select?'cuIcon-roundcheckfill':'cuIcon-round'"></text>
					</view>
				</view>
				<view class="padding-tb-xl padding-lr-lg flex justify-between">
					<view class="zm_half" @click="hidePop('pop1')">
						我不需要自动
					</view>
					<view class="zm_half bg" @click="hidePop('pop1')">
						确定
					</view>
				</view>
			</view>
		</uni-popup> -->
		<!-- 定制弹窗-7 -->
		<!-- <uni-popup ref="pop2" type="bottom">
			<view class="comBotBx">
				<view class="pw_img">
					<image class="mimg" :src="'https://cdn-static.yekjx.com/'+'food/images/meal_img06.png'"
						mode="aspectFill"></image>
				</view>
				<view class="mtitle padding-top text-xll padding-left">
					蒜苗孜然牛肉
				</view>
				<template v-for="(item,index) in state.mealdList" :key="index">
					<view class="padding-left-sm padding-top">
						<text class="cuIcon-titles text-ngreen"></text>
						<text class="text-bold text-lg">{{item.title}}</text>
					</view>
					<view v-for="(citem,cindex) in item.list" :key="cindex" :class="{kx:citem.select}"
						@click="tapdMeal(citem,item.list)"
						class="pw_litm text-lg flex align-center padding-lr-sm margin-left margin-top-sm">
						<view class="flex-sub">
							{{citem.name}}
						</view>
						<text class="text-xxl" :class="citem.select?'cuIcon-roundcheckfill':'cuIcon-round'"></text>
					</view>
					
				</template>
				<view class="padding-lr padding-top-sm padding-bottom-lg">
					<view class="com_full_btn" @tap="hidePop('pop2')">
						确定
					</view>
				</view>
		
			</view>
		</uni-popup> -->

		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
			interval="5000" duration="500">
			<swiper-item v-for="(item,index) in state.swiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		
		<view class="ms_test padding-left padding-top padding-bottom-sm bg-white p_rlt">
			<view class=" flex align-center">
				<view class="flex-sub text48">
					专业瘦瘦餐
				</view>
				<view class="padding-tb-xs padding-lr-lg point" @click="tapShopItem">
					详情<text class="cuIcon-right text-sm text-c6 margin-left-xxs"></text>
				</view>
			</view>
			<view class="text-c9 padding-tb-xs padding-right">
				21天餐再次新升级!种类更丰富，只为给你更好的轻负控卡生活!每天少跑7公里！
			</view>
			<!-- <view class="">
				<view class="navBtn" @click="tapShopItem">
					查看详情
				</view>
			</view> -->
			<view v-if="hasRecord" class="recodBox padding-lr-xs padding-bottom-xs">
				<view class="">
					<view class="setBox flex align-center padding-tb-sm p_rlt padding-right-xs">
						<view class="flex align-center p_rlt flex-sub padding-left-sm d_ib padding-tb-xs"
							@click="tapToggleCal">
							<text class="fcon-yongcanjilu textl60 text-c9 margin-right-xs"></text>
							<text class="text-bold text-lg">用餐记录</text>
							<text class=" margin-left-xs" :class="showCad?'cuIcon-fold':'cuIcon-unfold'"></text>
						</view>
						
						<view class="d_ib padding-tb-xs padding-left-lg p_rlt tmlef" @click="showPop('pop1')">
							<view class="text-end">
								设置自动约餐<text class="cuIcon-right text-sm text-c6"></text>
							</view>
							<view v-if="autoText" class="text-c9 padding-top-xs">
								{{autoText}}
							</view>
						</view>
					</view>
				</view>
				<!-- <uni-transition :mode-class="'slide-top'" :show="showCad"> -->
				<view class="mcalendbx" :class="{show:showCad,lg:filcalen}">
					<view class="padding-top mcdbox p_rlt">
						<view v-if="curMonth" class="mothbox text-sm text-c9">
							{{curMonth}}月
						</view>
						<!-- state.tapcaly -->
						<view class="calenSubFixed text-white" :class="{show:showCalSub}"
							:style="{top:state.tapcaly+'px'}">
							<view class="csfmain p_rlt">
								<text class="jtbox" :style="{left:state.tapcalx+'px'}"></text>
								<view class="flex align-center text-lg padding-tb-xs">
									<view class="flex-sub text-bold">
										早餐
									</view>
									<view class="padding-right">
										<text class="text-bold text-lg">308</text>Kcal
									</view>
								</view>
								<view class="clm_cont">
									<view class="flex align-center cpdmin">
										<view class="flex-sub">
											鸡蛋一个
										</view>
										<view class="">
											139kcal
										</view>
									</view>
									<view class="flex align-center cpdmin">
										<view class="flex-sub">
											甜玉米1根
										</view>
										<view class="">
											103kcal
										</view>
									</view>
									<view class="flex align-center cpdmin">
										<view class="flex-sub">
											纯牛奶一杯
										</view>
										<view class="">
											66kcal
										</view>
									</view>
								</view>

								<view class="flex align-center text-lg padding-tb-xs">
									<view class="flex-sub text-bold">
										中餐
									</view>
									<view class="padding-right">
										<text class="text-bold text-lg">530</text>Kcal
									</view>
								</view>
								<view class="clm_cont">
									<view class="flex align-center cpdmin">
										<view class="flex-sub">
											橄榄油老姜云耳炒鸡100g
										</view>
										<view class="">
											207kcal
										</view>
									</view>
									<view class="flex align-center cpdmin">
										<view class="flex-sub">
											橄榄油水芹炒百合100g
										</view>
										<view class="">
											131kcal
										</view>
									</view>
									<view class="flex align-center cpdmin">
										<view class="flex-sub">
											橄榄油自灼生菜100g
										</view>
										<view class="">
											37kcal
										</view>
									</view>
								</view>

								<view class="flex align-center text-lg padding-tb-xs">
									<view class="flex-sub text-bold">
										晚餐
									</view>
									<view class="padding-right">
										<text class="text-bold text-lg">359</text>Kcal
									</view>
								</view>
								<view class="clm_cont">
									<view class="flex align-center cpdmin">
										<view class="flex-sub">
											五红粥300g
										</view>
										<view class="">
											208kcal
										</view>
									</view>
									<view class="flex align-center cpdmin">
										<view class="flex-sub">
											橄榄油热拌鸡蛋干100g
										</view>
										<view class="">
											151kcal
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- <view v-for="index in 5" :key="index" class="mcitm"></view> -->
						<view v-for="(item,index) in state.calenList" :key="index" class="mcitm text-center"
							@click="tapCalItem">
							<block v-if="item.num">
								<view class="mcsub text-sm d_ib" :class="{ngreen:item.action}">
									<text v-if="item.action&&item.actnum==3" class="cuIcon-check text-xl"></text>
									<text v-else-if="item.action&&item.actnum!=3" class="">{{item.actnum}}</text>
									<text v-else>{{item.name}}</text>
								</view>
								<view class="mcnum text-xs">
									{{item.num}}
								</view>
							</block>
							<view v-else class="mcitm"></view>
						</view>
					</view>
				</view>
				<!-- </uni-transition> -->
			</view>

		</view>
		<view class="padding-tb text-xl padding-left text-c6">
			请选择您要点的菜
		</view>
		<view class="centSec margin-left-sm lh_z padding-bottom p_rlt">
			<!-- <view class="cmtit text-xl text-bold padding-top flex align-center justify-center">
				<text class="cstip"></text>
				请选择您需要点的菜品
				<text class="cstip right"></text>
			</view>
			<view class="text-center csline"></view>
			<view class="text-center text-c6 margin-top-xs">
				精选搭配套餐随心选
			</view> -->
			<view class="padding-top-xs">
				<view class="cstit text-lg flex align-center text-bold padding-top">
					<text class="margin-left-xs">肉食选购（二选一）</text>
				</view>
				<view class="cslist flex flex-wrap">
					<view v-for="(item,index) in state.mealList1" :key="index"
						class="d_ib clitm margin-right-sm margin-top-sm" @click="tapItemSelec(item)">
						<view class="climgbx">
							<image class="climg" :src="'https://cdn-static.yekjx.com/'+item.img" lazy-load
								mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="padding-top-xs padding-lr-xs text-cuts">
								{{item.name}}
							</view>
							<view class="text-sm text-c6 margin-top-xxs padding-lr-xs text-cuts">
								{{item.dis1}}<text class="csdian text-df">•</text> <text
									class="text-c9">{{item.dis2}}</text>
							</view>
							<view class="csbtnbx flex align-center justify-end padding-lr-sm margin-top-sm">
								<text class="csico text-xxl"
									:class="item.select?'.cuIcon-roundcheckfill':'cuIcon-round'"></text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="padding-top-xs">
				<view class="cstit text-lg flex align-center text-bold padding-top">
					<text class="margin-left-xs">每日鲜蔬（任选三）</text>
				</view>
				<view class="cslist flex flex-wrap">
					<view v-for="(item,index) in state.mealList2" :key="index"
						class="d_ib clitm margin-right-sm margin-top-sm">
						<view class="climgbx">
							<image class="climg" :src="'https://cdn-static.yekjx.com/'+item.img" lazy-load
								mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="padding-top-xs padding-lr-xs text-cuts">
								{{item.name}}
							</view>
							<view class="text-sm text-c6 margin-top-xxs padding-lr-xs text-cuts">
								{{item.dis1}}<text class="csdian text-df">•</text> <text
									class="text-c9">{{item.dis2}}</text>
							</view>
							<view class="csbtnbx flex align-center justify-end padding-lr-sm margin-top-sm">
								<view class="">
									<uni-number-box @change="changeNum" v-model="item.num" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="padding-top-xs">
				<view class="cstit text-lg flex align-center text-bold padding-top">
					<text class="margin-left-xs">饮品（已包含）</text>
				</view>
				<view class="cslist flex flex-wrap">
					<view v-for="(item,index) in state.mealList3" :key="index"
						class="d_ib clitm margin-right-sm margin-top-sm" @click="item.select=!item.select">
						<view class="climgbx">
							<image class="climg" :src="'https://cdn-static.yekjx.com/'+item.img" lazy-load
								mode="aspectFit"></image>
						</view>
						<view class="">
							<view class="padding-top-xs padding-lr-xs text-cuts">
								{{item.name}}
							</view>
							<view class="text-sm text-c6 margin-top-xxs padding-lr-xs text-cuts">
								{{item.dis1}}<text class="csdian text-df">•</text> <text
									class="text-c9">{{item.dis2}}</text>
							</view>
							<view class="csbtnbx flex align-center justify-end padding-lr-sm margin-top-sm">
								<view class="">
									<uni-number-box @change="changeNum" v-model="item.num" :disabled="item.disabled" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bot_padbox"></view>
		<view class="meal_botbx padding-top-xs">
			<view class="bot_main" :class="{scemt:loaded&&carList.length<=0}">
				<view class="bmtop">
					<view class="bmtbox">
						<view v-if="loaded&&carList.length>0" class="padding-left flex align-center text-white text-sm">
							<text class="flex-sub">已选餐品</text>
							<view class="padding-tb-xxs padding-lr" @click="tapClearCar">
								<text class="cuIcon-delete"></text>
								清空
							</view>
						</view>
						<scroll-view scroll-x="true" class="bot_scr">
							<view v-if="loaded&&carList.length<=0" class="padding-left">
									<view class="btitm p_rlt">
										<view class="btimg text-acenter"><text class="cuIcon-add text-white"></text></view>
										<view class="btmsbx text-center text-xs">
											<view class="btcont text-acenter text-white d_ib">
												x0
											</view>
										</view>
									</view>
								
							</view>
							<view v-else class="mnav padding-left">
								<view v-for="(item,index) in carList" :key="index" class="btitm p_rlt" @click="item.type=='dz'&&showPop('pop2')">
									<uni-transition :mode-class="['fade', 'slide-right']" :show="item.num">
										
									<view class="bttip text-acenter" @click.stop="delCarItem(item)">
										<text :class="item.disabled?'fcon-a-jiesuo11':'fcon-a-close'"></text>
									</view>
									<image class="btimg"
										:src="env.FileUrl + item.img"
										mode="aspectFill"></image>
									<view class="btmsbx text-center text-xs">
										<view class="btcont text-acenter text-white d_ib" :class="{kx:item.type=='dz'}">
											<block v-if="item.type=='dz'">
												定制
											</block>
											<block v-else>
												x{{item.num}}
											</block>
										</view>
									</view>
									</uni-transition>
								</view>
								<!-- <view class="btitm p_rlt">
									<view class="bttip text-acenter">
										<text class="fcon-a-close"></text>
									</view>
									<image class="btimg"
										:src="'https://cdn-static.yekjx.com/'+'food/images/meal_img05.png'"
										mode="aspectFill"></image>
									<view class="btmsbx text-center text-xs">
										<view class="btcont text-acenter text-white d_ib">
											x1
										</view>
									</view>
								</view>
								<view class="btitm p_rlt" @click="showPop('pop2')">
									<view class="bttip text-acenter">
										<text class="fcon-a-close"></text>
									</view>
									<image class="btimg"
										:src="'https://cdn-static.yekjx.com/'+'food/images/meal_img06.png'"
										mode="aspectFill"></image>
									<view class="btmsbx text-center text-xs">
										<view class="btcont kx text-acenter text-white d_ib">
											定制
										</view>
									</view>
								</view> -->
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="bmbot flex align-center padding-right">
					<view class="bmlef text-center text-white p_rlt">
						<view class="bmyuan d_ib">
							<text class="fcon-a-Frame427320501"></text>
						</view>
						<view class="text-xs">
							健康顾问
						</view>
					</view>
					<view v-if="loaded&&carList.length<=0" class="flex-sub text-xll text-center text-white">
						请选择餐品
					</view>
					<block v-else>
						<view class="flex-sub text-white padding-left">
							<view>
								已用餐<text class="text-bold d_ib padding-lr-xs">5</text>次
							</view>
							<view>
								剩余<text class="d_ib padding-lr-xs">2</text>次
							</view>
						</view>
						<view class="bmsubbtn" @click="tapSubmit">
							下单
						</view>
					</block>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive,computed } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import speciModal from '@/components/speciModal/speciModal.vue'
	import setAutoMeal from '@/components/setAutoMeal/setAutoMeal.vue';
	import { mnavTo } from '@/utils/helper';
	import {env} from '@/api/env.js'; 
	// const menus = [{ icon: '', text: '111' }]
	const pop1 = ref(null);
	const pop2 = ref(null);
	const pop3 = ref(null);
	const loaded = ref(false)
	const showCad = ref(false)//是否展开日历
	const showCalSub = ref(false)//是否展开日历详情
	const hasRecord = ref(false)//是否展示记录模块
	onLoad((options) => {
		hasRecord.value = options.hasRecord
		initCarData()
		initCalenList();
		// const sys = uni.getSystemInfoSync();
		// this.windowWidth = sys.windowWidth;
		// this.windowHeight = sys.windowHeight;
	});
	// console.log('object',timeStr);
	let state = reactive({
		calenList: [],
		swiperList: [{
			id: 0,
			type: 'image',
			url: 'https://cdn-static.yekjx.com/food/images/sw_img01.png'
		}, {
			id: 1,
			type: 'image',
			url: 'https://cdn-static.yekjx.com/food/images/sw_img01.png',
		}],
		mealList1: [
			{
				id:'0',
				name: '蒜苗孜然牛肉',
				dis1: '小份(约100g)',
				dis2: '111Kcal',
				img: 'food/images/meal_img06.png',
				select: false,
				num: 0,
			},
			{
				id:'1',
				name: '手撕鸡',
				dis1: '小份(约100g)',
				dis2: '178Kcal',
				img: 'food/images/meal_img05.png',
				select: true,
				num: 1,
			}
		],
		mealList2: [
			{
				id:'2',
				name: '山茶油黄焖黄鸭叫',
				dis1: '1条/份',
				dis2: '111Kcal',
				img: 'food/images/meal_img02.png',
				num: 1,
				type:'dz',//定制
				startTime: '',
				endTime: ''
			},
			{
				id:'3',
				name: '橄榄油秘制酵素油豆腐',
				dis1: '100g',
				dis2: '173Kcal',
				img: 'food/images/meal_img03.png',
				num: 0
			},
			{
				id:'4',
				name: '橄榄油热拌鸡蛋干',
				dis1: '100g',
				dis2: '111Kcal',
				img: 'food/images/meal_img02.png',
				num: 0
			},
			{
				id:'5',
				name: '橄榄油杏鲍菇牛柳',
				dis1: '100g',
				dis2: '100Kcal',
				img: 'food/images/meal_img01.png',
				num: 0
			}
		],
		mealList3: [
			{
				id:'6',
				name: '五彩豆花',
				dis1: '100g',
				dis2: '173Kcal',
				img: 'food/images/meal_img07.png',
				num: 1,
				disabled: true
			}
		],
		carList:[],
		dzfId: '',
		dztId: '',
		// mealdList: [
		// 	{
		// 		title: '香菜',
		// 		list: [
		// 			{
		// 				name: '不要香菜',
		// 				id: '1',
		// 				select: true
		// 			},
		// 			{
		// 				name: '要香菜',
		// 				id: '2',
		// 				select: false
		// 			}
		// 		]
		// 	},
		// 	{
		// 		title: '辣度',
		// 		list: [
		// 			{
		// 				name: '微辣',
		// 				id: '1',
		// 				select: true
		// 			},
		// 			{
		// 				name: '重辣',
		// 				id: '2',
		// 				select: false
		// 			}
		// 		]
		// 	}
		// ],
		tapcalx: 0,
		tapcaly: 0
	});
	
	//规格-弹窗
	const specItem = ref({
		name: '橄榄油胡萝卜丝炒百合',
		renum: '463Kcal',
		list: [
			{
				name: '规格',
				selecId: '0',
				subList: [
					{
						id: '0',
						name: '小小份（约100g）'
					},
					{
						id: '1',
						name: '小份（约200g）'
					},
					{
						id: '2',
						name: '标准份（约300g）'
					}
				]
			},
			{
				selecId: '3',
				name: '香菜',
				subList: [
					{
						id: '3',
						name: '不要香菜'
					},
					{
						id: '4',
						name: '要香菜'
					}
				]
			},
			{
				selecId: '5',
				name: '辣度',
				subList: [
					{
						id: '5',
						name: '微辣'
					},
					{
						id: '6',
						name: '中辣'
					},
					{
						id: '7',
						name: '特辣'
					}
				]
			}


		]
	})
	const curList = ref([])
	
	const carList = computed(() => {
	  return curList.value.filter(item => item.num>0);
	});
	const goodList = ref([]) 
	goodList.value = [...state.mealList1,...state.mealList2,...state.mealList3]
	const initCarData = ()=>{
		//初始化car,模拟
		curList.value = goodList.value;
		loaded.value = true
		// carList.value 
		// let cindex  = curList.value.findIndex(item=>item.num>0);
		// carList.value 
		// console.log('car-init0',curList.value)
	}
	//切换日历
	const tapToggleCal = () => {
		showCad.value = !showCad.value
	}
	const curMonth = ref(null)
	const filcalen = ref(false)
	// 汉字表示的一周中的每一天
	const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
	// 初始化日历数据
	const initCalenList = () => {
		//当前
		let year = new Date().getFullYear();
		let month = new Date().getMonth();
		curMonth.value = month + 1
		// let  currDay = new Date().getDate();
		// 总天数
		console.log('initCalenList0', year, month);
		let date = new Date(year, month, 0);
		console.log('initCalenList', year, month, date);
		let days = date.getDate();
		// 第一天/最后一天星期几
		let dayListItem = [];
		let whichFirstDay = new Date(year, month, 1).getDay();
		let whichLastDay = new Date(year, month, days).getDay();
		let wk = whichFirstDay
		console.log('总天数-第一天-最后一天', days, whichFirstDay, whichLastDay);
		for (let i = 1; i <= days; i++) {
			wk = wk > 6 ? 0 : wk
			let listItem = {
				num: i,
				name: weekDays[wk],
				action: i == 8 || i == 9 || i == 10 || i == 11 || i == 12 ? true : false,
				actnum: i == 8 || i == 10 ? 1 : i == 9 || i == 11 ? 2 : i == 12 ? 3 : ''
			};
			dayListItem.push(listItem);
			wk++
		}
		for (let i = 0; i < whichFirstDay; i++) {
			dayListItem.unshift({ space: true, num: '' });
		}

		let nlastDay = whichLastDay == 0 ? 6 : 7 - (Number(whichLastDay) + 1);
		for (let i = 0; i < nlastDay; i++) {
			dayListItem.push({ space: true, num: '' });
		}
		console.log('dayListItem', dayListItem);
		dayListItem.length > 35 ? (filcalen.value = true) : (filcalen.value = false);
		state.calenList = dayListItem
	}
	
	//修改数量
	const changeNum = (e : any) => {
		console.log('changenum', e);
		// console.log('changenum', state.mealList2);
		initCarData()
	}
	// 删除购物车数据
	const delCarItem = (item : any) => {
		item.num = 0
		let cindex = carList.value.findIndex(citem=>citem.id==item.id)
		cindex>=0&&carList.value.splice(cindex,1)
	}
	// 清空
	const tapClearCar = ()=>{
		curList.value = []
		goodList.value.forEach(item=>{
			item.num = 0
			item.select = false
		})
	}
	//下单
	const tapSubmit = ()=>{
		uni.setStorageSync('fromPages','meal')//暂时
		mnavTo('/pages/order/creatOrder/creatOrder')
	}
	const doSubmit = ()=>{
		
	}
	// 自动约餐文字
	const autoText = ref('')
	// 自动约餐确认
	const sureAuto = (param:any)=>{
		autoText.value = param.text||''
	}
	// const tabClass = ref(0)
	const showPop = (source : string) => {
		switch (source) {
			case 'pop1':
				pop1.value?.open()
				break;
			case 'pop2':
				pop2.value?.open()
				break;
			case 'pop3':
				pop3.value?.open()
				break;
			default:
				break;
		}
	}
	const hidePop = (source : string) => {
		switch (source) {
			case 'pop1':
				pop1.value?.close()
				break;
			case 'pop2':
				pop2.value?.close()
				break;
			case 'pop3':
				pop3.value?.close()
				break;
			default:
				break;
		}
	}
	// const tapdMeal = (item : AnyObject, list : AnyObject) => {
	// 	if (item.select) {
	// 		item.select = false
	// 		return
	// 	}
	// 	list.forEach((citem) => {
	// 		citem.select = false
	// 	})
	// 	item.select = !item.select
	// }
	
	// const tapCalItem1 = (event) => {
	// 	// const { width, height } = event.target.getBoundingClientRect();
	// 	// const rect = event.target.getBoundingClientRect();
	// 	console.log('tapcal', event);
	// 	// console.log('tapcal',event,width,height);
	// 	// tapcalx


	// }
	// const sys = uni.getSystemInfoSync();
	// const windowWidth = sys.windowWidth;
	// const windowHeight = sys.windowHeight;
	const tapCalItem = (event) => {
		const cur = event.currentTarget
		let oflef = cur.offsetLeft, oftop = cur.offsetTop
		state.tapcaly = oftop + uni.upx2px(80)
		state.tapcalx = oflef + uni.upx2px(49 - 10 - 14)
		showCalSub.value = !showCalSub.value
		const query = uni.createSelectorQuery();
		query.select('.mcitm').boundingClientRect(); // 选择类名为my-element的元素
		query.exec((res) => {
			if (res[0]) {
				// res[0]即为所需的元素信息
				// console.log(`宽度: ${res[0].width}px, 高度: ${res[0].height}px`,res,event);

			}
		});
	}
	// 获取一个目标元素
	// const getElRect = (elClass, dataVal) => {
	// 	new Promise((resolve, reject) => {
	// 		const query = uni.createSelectorQuery().in(this);
	// 		query.select('.' + elClass).fields({size: true},res => {
	// 			// 如果节点尚未生成，res值为null，循环调用执行
	// 			if(!res) {
	// 				setTimeout(() => {
	// 					// getElRect(elClass);
	// 				}, 10);
	// 				return ;
	// 			}
	// 			console.log('elClass',elClass,res)
	// 			// state[dataVal] = res.height;
	// 		}).exec();
	// 	})
	// }	
	const tapShopItem = () => {
		uni.navigateTo({
			url: '/pages/order/goodsDetial/goodsDetial?shopType=1'
		})
	}
	const tapItemSelec = (item:any)=>{
		item.select=!item.select
		item.select?item.num=1:item.num=0
		//暂
		// let cindex = goodList.value.findIndex(citem=>citem.id==item.id)
		// if(cindex>=0){
			// let nitem = goodList.value[cindex]
			// nitem.select=!nitem.select
			// nitem.select?nitem.num=1:nitem.num=0
		// }
	}
</script>

<style lang="scss">
	.container {
		background: #F2F2F2;
	}

	.text48 {
		font-size: 48rpx;
	}

	.ms_test {
		box-shadow: (0px 2px 10px rgba(0, 0, 0, 0.10));
		z-index: 3;
	}

	.navBtn {
		@include centBox(152rpx, 56rpx, rgba(153, 153, 153, 0.5));
		border-radius: 56rpx;
		color: #fff;
	}

	.recodBox {
		width: calc(100vw - 60rpx);
		border-radius: 10rpx;
		// opacity: 0.3;
		// background: rgba(235, 239, 251, 0.3);
	}

	.setBox {
		border-radius: 10rpx 10rpx 0 0;
		// background: rgba(235, 239, 251, 0.3);
	}
	.textl60{
		font-size: 52rpx;
	}
	.nvbf {
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 16rpx;
			width: 4rpx;
			height: 32rpx;
			background: $text-act;
		}
	}

	.mothbox {
		position: absolute;
		left: 30rpx;
		top: 10rpx;
	}

	.mcalendbx {
		// position: absolute;
		// left: 0;
		// top: 86rpx;
		border-radius: 20rpx;
		width: 100%;
		background: rgba(235, 239, 251, 0.3);
		z-index: 2;
		height: 0;
		overflow: hidden;
		&.lg {
			&.show {
				height: 582rpx;
			}

			.mcdbox {
				height: 582rpx;
			}
		}

		.mcdbox {
			height: 498rpx;
			border-radius: 20rpx;
			border: 1px solid rgba(153, 153, 153, 0.1);

		}

		&.show {
			height: 500rpx;
			overflow: inherit;
			// transition: height 0.2s ease-out;
			// animation: anshow 0 ease-in-out 0.2s forwards;
			// animation: anshow 0,0.2s,1;
			// animation-fill-mode: forwards;
		}

		@keyframes anshow {
			from {
				overflow: hidden;
			}

			to {
				overflow: inherit;
			}
		}

		.mcitm {
			width: 14.28%;
			height: 84rpx;
			display: inline-block;
		}

		.mcsub {
			width: 60rpx;
			height: 60rpx;
			line-height: 61rpx;
			background: $color-white;
			color: #CFCFCF;
			border-radius: 50%;

			&.ngreen {
				background: linear-gradient(138deg, #B8E4C0 14.11%, #83DD86 84.09%);
				color: #F8FFFB;
			}
		}
	}

	.cuIcon-round {
		color: #999;
	}

	.cuIcon-roundcheckfill {
		color: $base-color;
	}

	.centSec {
		width: calc(100vw - 40rpx);
		min-height: 300rpx;
		border-radius: 20rpx;
		background: $color-white;
		z-index: 1;

		.cslist {
			padding: 10rpx 16rpx 0 16rpx;
		}

		.clitm {
			width: calc(50% - 12rpx);
			height: 362rpx;
			border-radius: 24rpx 24rpx 10rpx 10rpx;
			border: 1px solid #F7F7F7;
			background: $color-white;

			&:nth-child(2n) {
				margin-right: 0;
			}
		}

		.climgbx,
		.climg {
			width: 100%;
			height: 200rpx;
		}

		.climg {
			border-radius: 24rpx 24rpx 0px 0px;
		}

		.csbtnbx {
			min-height: 60rpx;
		}



		.csdian {
			padding: 0 6rpx;
		}
	}

	.cstip {

		&:before,
		&:after {
			content: '';
			display: inline-block;
			position: relative;
			width: 34rpx;
			height: 23rpx;
			border-radius: 23rpx;
			opacity: 0.5;
			background: linear-gradient(90deg, rgba(137, 184, 61, 0.03) 0%, rgba(44, 172, 88, 0.50) 100%);
			z-index: 1;
		}

		&:after {
			left: -18rpx;
			z-index: 2;
		}

		&.right {
			margin-left: 18rpx;

			&:before,
			&:after {
				background: linear-gradient(90deg, rgba(44, 172, 88, 0.50) 0%, rgba(137, 184, 61, 0.03) 100%);
			}
		}
	}

	.csline {
		line-height: 50rpx;

		// height: 5rpx;
		&:before {
			content: '';
			display: inline-block;
			width: 32rpx;
			height: 5rpx;
			border-radius: 5rpx;
			background: #333;
		}
	}

	.cstit {
		&:before {
			content: '';
			display: inline-block;
			width: 16rpx;
			height: 32rpx;
			background: $base-color;
		}
	}

	.bot_padbox {
		height: 356rpx;
	}

	//底部模块-s
	.meal_botbx {
		position: fixed;
		width: calc(100vw - 40rpx);
		height: 336rpx;
		left: 20rpx;
		bottom: 0;
		z-index: 3;
	}
	.bot_main{
		&.scemt{
			
			.btitm{
				// background: #8D8D8D;
			} 
			.btimg{
				border: none;
				background: #8D8D8D;
			}
			.btcont{
				background: #6A6A6A;
			}
			.bmbot{
				background: #8D8D8D!important;
			}
			
		} 
	}
	.bot_scr {
		height: 130rpx;
		
		.btitm {
			display: inline-block;
			margin: 16rpx 30rpx 0 0;

		}

		.btitm,
		.btimg {
			width: 92rpx;
			height: 92rpx;
		}

		.btimg {
			border-radius: 10rpx;
			border: 1px solid $base-color;
		}
		
		.btmsbx {
			// width: 100%;
			// position: absolute;
			// height: 30rpx;
			@include baseab(100%, 30rpx);
			left: 0;
			bottom: -10rpx;
			z-index: 1;
		}

		.btcont {
			min-width: 64rpx;
			height: 30rpx;
			line-height: 31rpx;
			border-radius: 30rpx;
			background: $base-color;

			&.kx {
				color: $base-color;
				border: 1px solid $base-color;
				background: #FFF;
			}
		}

		.bttip {
			@include baseab(28rpx, 28rpx);
			border-radius: 50%;
			background: #fff;
			top: -10rpx;
			right: -10rpx;

		}
	}

	.fcon-a-close {
		font-size: 20rpx;
	}
	.tmlef{
		&::after {
			content: '';
			width: 3rpx;
			height: 100%;
			position: absolute;
			// @include baseab(3rpx,100rpx);
			opacity: 0.5;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(133, 133, 133, 0.46) 46.5%, rgba(0, 0, 0, 0.00) 88.58%);
			left: 0;
			top: 0;
			z-index: 2;
		}
	}
	.bmlef {
		width: 144rpx;
		&::after {
			content: '';
			width: 3rpx;
			height: 100rpx;
			position: absolute;
			// @include baseab(3rpx,100rpx);
			opacity: 0.5;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(255, 255, 255, 0.46) 46.5%, rgba(0, 0, 0, 0.00) 88.58%);
			right: 0;
			top: 0;
			z-index: 2;
		}
	}
	.bot_main {
		width: 100%;
		height: 306rpx;

		.bmtop {
			height: 196rpx;
			background: #1D3E5F;
			border-radius: 40rpx 40rpx 0 0;
			padding: 10rpx 10rpx 0 10rpx;
		}

		.bmtbox {
			height: 100%;
			border-radius: 40rpx 40rpx 0 0;
			border: 10rpx solid #040404;
			border-bottom: 0;
		}

		.bmbot {
			height: 110rpx;
			background: $base-color;
			border-radius: 0 0 40rpx 40rpx;
		}

		

		.bmyuan {
			font-size: 46rpx;
			width: 70rpx;
			height: 70rpx;
			line-height: 71rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
		}

		.bmsubbtn {
			@include centBox(202rpx, 66rpx);
			border-radius: 66rpx;
			color: $base-color;
		}
	}

	//底部模块-e

	//弹窗1-s
	.zm_itm {
		@include centBox(68rpx, 68rpx);
		border-radius: 50%;
		background: $base-color;
		margin: 20rpx 0 0 30rpx;

		&.kx {
			background: #fff;
			color: #999;
			border: 1px solid #999;
		}
	}

	.zm_slc {
		margin: 20rpx 40rpx 0 0;
		// margin-left: 0!important;
		// font-size: 24rpx;
		white-space: nowrap;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 306rpx;
		height: 90rpx;
		background: #F7F7F7;

		// box-sizing: border-box;
		// font-family: Microsoft YaHei, Helvetica Neue, Helvetica, sans-serif;
		&:nth-child(2n) {
			margin: 20rpx 0 0 0;
		}
	}

	.zm_half {
		width: 316rpx;
		font-size: 32rpx;
		text-align: center;
		height: 88rpx;
		line-height: 89rpx;
		// box-shadow: 0px 10px 40px rgba(76, 162, 123, 0.26);
		border-radius: 16rpx;
		cursor: pointer;
		background: #fff;
		color: #999;
		border: 1px solid #999;

		&.bg {
			color: #fff;
			background: $view-act;
		}
	}

	//弹窗1-e
	//弹窗2-s
	.pw_img {
		min-height: 300rpx;
	}

	.mimg {
		border-radius: 20rpx 20rpx 0 0;
		height: 300rpx;
	}

	.pw_litm {
		width: calc(100% - 60rpx);
		height: 90rpx;
		border-radius: 10rpx;
		background: #F7F7F7;

		&.kx {
			background: none;
			border: 1px solid #53A87F;
		}
	}

	//弹窗2-e
	// 日历扩展弹窗-s
	.calenSubFixed {
		position: absolute;
		left: 15rpx; //50
		width: 658rpx;
		// min-height: 200rpx;
		height: 0;

		z-index: 106;
		overflow: hidden;

		// opacity: 0;
		&.show {
			// overflow: inherit;
			height: 692rpx; //暂
			// opacity: 1;
			transition: height 0.2s ease-out;

		}

		.csfmain {
			margin-top: 20rpx;
			border-radius: 10px;
			background: #80D2A7;
			padding: 10rpx 30rpx 30rpx 30rpx;
			// &::before{
			// 	content:'';
			// 	position: absolute;
			// 	width: 0;
			// 	height: 0;
			// 	align-self: center;
			// 	position: absolute;
			// 	border: 30rpx solid transparent;
			// 	top:-20rpx;
			// 	left:50%;
			// 	margin-left:-20rpx;
			// 	border-top: none;
			// 	border-bottom-color: #80D2A7;
			// }
		}

		.jtbox {
			position: absolute;
			width: 0;
			height: 0;
			align-self: center;
			position: absolute;
			border: 30rpx solid transparent;
			top: -16rpx;
			left: 50%;
			margin-left: -20rpx;
			border-top: none;
			border-bottom-color: #80D2A7;
			// border-bottom-height: 20rpx;
		}
	}

	.clm_cont {
		padding: 16rpx 30rpx 10rpx 30rpx;
		border-radius: 5px;
		background: linear-gradient(98deg, rgba(22, 129, 67, 0.20) 2.4%, rgba(22, 129, 67, 0.20) 95.9%, rgba(22, 129, 67, 0.20) 95.91%);

		.cpdmin {
			padding-bottom: 8rpx;
		}
	}

	// 日历扩展弹窗-e
	// .popup-content {
	// 	width: 100%;
	// 	padding-bottom: 30rpx;
	// 	border-radius: 0 0 15rpx 15rpx;
	// 	background: rgba(255, 255, 255, 0.8);
	// 	-webkit-backdrop-filter: blur(8px);
	// 	backdrop-filter: blur(8px);

	// 	.popup-title {
	// 		padding: 30rpx;
	// 		font-size: 36rpx;
	// 		font-weight: bold;
	// 	}

	// 	.popup-menus {
	// 		width: 90%;
	// 		margin: 0 auto;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		flex-wrap: wrap;

	// 		.menu {
	// 			width: 25%;
	// 			margin-bottom: 30rpx;
	// 			height: 150rpx;
	// 			display: flex;
	// 			flex-direction: column;
	// 			align-items: center;
	// 			justify-content: center;

	// 			.icon {
	// 				font-size: 54rpx;
	// 				background-color: #FFFFFF;
	// 				width: 100rpx;
	// 				height: 100rpx;
	// 				text-align: center;
	// 				line-height: 100rpx;
	// 				border-radius: 50rpx;
	// 			}

	// 			.txt {
	// 				font-size: 28rpx;
	// 				padding-top: 10rpx;
	// 			}
	// 		}
	// 	}
	// }
</style>